<template>
  <div style="margin: 20px">
    <div style="margin-top: 5px">
      <el-form ref="gridHeadLayout" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.ruleName"
            size="mini"
            placeholder="请输入规则名称">
          </el-input>
        </el-form-item>
        <el-form-item class="top-button">
          <el-button size="mini" icon="el-icon-search" @click="handleSearch"></el-button>
          <el-button size="mini" icon="el-icon-refresh-right" @click="handleEmpty"></el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div style="max-height: calc(100vh - 285px);height: calc(100vh - 285px); overflow: auto;">
        <el-row v-if="data.length" style="margin-top: 20px">
          <div class="warning-card">
            <el-col :span="6" v-for="(item, index) in data" :key="index">
              <el-card shadow="hover" style="font-size: 14px; padding-bottom: 10px; margin-right: 10px;margin-bottom: 10px">
                <div style="margin-bottom: 10px">
                  <div style="padding: 20px 20px 5px 20px">
                    <div class="point-head" style="position: relative;font-size: 18px; font-weight: bold; margin-bottom: 10px;">
                      {{ item.ruleName }}
                      <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <a style="font-size: 14px; position: absolute; right: 0" @click="rowEdit(item)">
                          <span class="el-icon-edit" style="font-size: 18px;color: #1677FF"></span>
                        </a>
                      </el-tooltip>
                    </div>
                    <div class="point-content" style="margin-bottom: 10px">
                      <div style="margin: 16px 6px 0 0px">
                        <span style="color: #646a73">规则类型：</span>
                        <span style="color: #1677ff;">
                        <dict-tag :type="DICT_TYPE.RULE_TYPE" :value="item.ruleType"/>
                      </span>
                      </div>
                      <div style="margin: 16px 6px 0 0px">
                        <span style="color: #646a73">规则表达式：</span>
                        <span style="color: #1677ff;">{{ item.ruleExpression }}</span>
                      </div>
                    </div>
                    <el-divider></el-divider>
                  </div>

                  <div style="padding: 0 20px 0 20px;">
                    <div style="float: left">
                      <el-button size="mini" style="margin: 5px"
                                 @click="rowRemove(item)">删除
                      </el-button>
                    </div>
                    <div style="float: right">
                      <el-button type="text" @click="handleView(item)" size="small">更多信息</el-button>
                    </div>
                  </div>
                </div>

              </el-card>
            </el-col>
          </div>
        </el-row>
      </div>

      <el-pagination
        background
        :current-page="page.currentPage"
        :page-sizes="[8, 16, 32, 64, 128]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.pageSize"
        :pager-count="5"
        @size-change="changeSize"
        @current-change="changeCurrent"
        style="float: right; margin: 20px 0;">
      </el-pagination>

      <el-dialog
        v-dialog-drag
        :title="'规则配置'"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :visible.sync="ruleDialog"
        v-if="ruleDialog"
        width="60%"
        @close="ruleDialog = false"
        class="custom-dialog"
      >
        <ruleCondition ref="overseasProjectFillingEdit" :rowData="rowData"
                       @ruleDialogClose="ruleDialogClose"></ruleCondition>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {page as getPage, remove} from '@/api/warning/warningRule-api.js'
import {mapState} from 'vuex';
import ruleCondition from "@/views/warning/rule/add.vue";

export default {
  name: "product",
  components: {
    ruleCondition
  },
  computed: {
    ...mapState('SET_DICT_DATAS'),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  data() {
    return {
      rowData: {},
      ruleDialog: false,
      tableLoading: false,
      options: [],
      data: [],
      selectionList: [],
      formInline: {},
      page: {
        pageSize: 8,
        currentPage: 1,
        total: 0
      },
    }
  },
  mounted() {
    this.$tab.updatePage(Object.assign({}, this.$route, {title: '规则配置'}));
    this.onLoad(this.page, {});
    this.options = this.$store.state.dict.dictDatas.is_enable
  },
  methods: {
    ruleDialogClose() {
      this.ruleDialog = false;
      this.onLoad(this.page, {})
    },
    changeCurrent(val) {
      this.page.currentPage = val
      this.onLoad(this.page, {})
    },
    changeSize(val) {
      this.page.pageSize = val
      this.onLoad(this.page, {})
    },
    rowRemove(row) {
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
    },
    headAdd() {
      this.ruleDialog = true;
      let row = {id: null}
      this.rowData = {
        row: JSON.stringify(row),
        type: 'add',
      }
    },
    rowEdit(row) {
      this.ruleDialog = true;
      this.rowData = {
        row: JSON.stringify(row),
        type: 'edit',
      }
    },
    handleView(row) {
      this.ruleDialog = true;
      this.rowData = {
        row: JSON.stringify(row),
        type: 'view',
      }
    },
    rowDetail(row) {
    },
    handleSearch() {
      this.page.currentPage = 1
      this.onLoad(this.page, this.formInline)
    },
    handleEmpty() {
      this.formInline = {}
      this.onLoad(this.page)
    },
    headRemove() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择数据");
        return;
      }
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let ids = this.selectionList.map(item => {
            return item.id
          }).join(',')
          return remove(ids);
        })
        .then(() => {
          // 刷新表格数据并重载
          this.data = [];
          // 表格数据重载
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功",
          });
        });
    },
    handleSelectionChange(selection) {
      this.selectionList = selection
    },
    indexMethod(index) {
      return index + 1
    },
    onLoad(page, params = {}) {
      this.page = page;
      this.tableLoading = true;
      getPage(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.formInline)
      ).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.tableLoading = false;
        // this.toggleSelection();
      });
    },
  }
}
;
</script>
<style scoped>
.warning-card ::v-deep .el-card__body {
  padding: 0 !important;
}

.warning-card ::v-deep .el-divider--horizontal {
  margin: 0;
}

.top-button ::v-deep .el-button + .el-button {
  margin-left: 0;
}

.custom-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* 或者根据需要设置一个固定的高度 */
}
</style>
